<template>
  <div>
    <vxe-tip status="primary" title="配置">
      slots:{ default:'tp_default' }
    </vxe-tip>
    <vxe-tip status="danger" title="命名规范">
      slots名称，必须以 【_default】 结尾，且不能出现大写字母, ( 推荐，field +
      _default )
    </vxe-tip>
    <y-table ref="tableRef" v-bind="listOptions">
      <template #xm_default="{ row }">
        <div>{{ row.xm }} div</div>
      </template>
    </y-table>
  </div>
</template>

<script>
import { getTableData } from '@/api/table'

export default {
  data() {
    return {
      listOptions: {
        // 获取数据方法
        dataMethod: getTableData,
        // 表格配置
        tableOptions: {
          height: '',
          // 表格列
          columns: [
            { type: 'seq', width: 70 },
            {
              field: 'kdmc',
              title: '考点名称',
              cellRender: {
                name: 'link',
                props: {
                  href: (row) => 'https://www.baidu.com',
                  target: '_blank'
                }
              }
            },
            { field: 'xm', title: '姓名', slots: { default: 'xm_default' } },
            {
              field: 'img',
              title: '图片',
              cellRender: {
                name: 'image',
                props: {}
              }
            },
            {
              title: '操作',
              cellRender: {
                name: 'buttons',
                options: [
                  { content: '修改', name: 'edit' },
                  {
                    content: '更多',
                    dropdowns: [
                      { content: '删除', name: 'delete' },
                      { content: '审核', name: 'audit' }
                    ]
                  }
                ],
                events: {
                  click: ({ name, row }) => {
                    console.log({ name, row })
                    switch (name) {
                      case 'edit':
                        // this.edit(row)
                        break
                      case 'delete':
                        // this.delete(row)
                        break
                      case 'audit':
                        // this.audit(row)
                        break
                      default:
                        break
                    }
                  }
                }
              }
            }
          ]
        }
      }
    }
  },
  mounted() {
    this.$refs.tableRef.loadData()
  },
  methods: {}
}
</script>

<style lang="scss"></style>
